<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Select V2 虚拟列表选择器</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

</head>
<body>
<div id="app" class="">
	<el-affix :offset="20">
		<el-button type="primary" @click="showValue">查看所选数据</el-button>
	</el-affix>
	
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">适用广泛的基础选择器</p>
	<el-select-v2 v-model="value1" :options="options" placeholder="Please select" size="large" default-first-option filterable></el-select-v2> &nbsp;
	<el-select-v2 v-model="value2" :options="options" placeholder="Please select"></el-select-v2> &nbsp;
	<el-select-v2 v-model="value3" :options="options" placeholder="Please select" size="small"></el-select-v2>
	
	<!-- <p>实测用el-select标签也可以</p>
	<el-select v-model="value1" placeholder="请选择..." size="large" default-first-option filterable>
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
	</el-select>&nbsp;
	<el-select v-model="value2" placeholder="请选择...">
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
	</el-select>&nbsp;
	<el-select v-model="value3" placeholder="请选择..." size="small">
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
	</el-select> -->
	
	<el-divider content-position="left">多选</el-divider><!-- =============================================================== -->
	<p class="desc">最基础的多选选择器</p>
	<el-select-v2 v-model="value4" :options="options" placeholder="Please select" multiple style="width: 240px"></el-select-v2>
	
	<!-- <p>实测用el-select标签也可以</p>
	<el-select v-model="value4" placeholder="请选择..." multiple>
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
	</el-select> -->
	
	<el-divider content-position="left">隐藏多余标签的多选</el-divider><!-- =============================================================== -->
	<p class="desc">默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。 您可以使用 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。</p>
	<el-select-v2 v-model="value5" :options="options" placeholder="Please select" multiple style="width: 240px" collapse-tags></el-select-v2> &nbsp;
	<el-select-v2 v-model="value5" :options="options" placeholder="Please select" multiple style="width: 240px" collapse-tags collapse-tags-tooltip></el-select-v2>
	
	<el-divider content-position="left">可过滤的多选</el-divider><!-- =============================================================== -->
	<p class="desc">当选项太多时，你可以使用 filterable 选项来启用过滤功能来找到所需的选项。</p>
	<el-select-v2 v-model="value6" :options="options" placeholder="Please select" multiple style="width: 240px" collapse-tags filterable></el-select-v2> &nbsp;
	
	<el-divider content-position="left">禁用选择器本身或选项</el-divider><!-- =============================================================== -->
	<p class="desc">您可以选择禁用 Select 或者 Select 中的某个选项</p>
	<el-select-v2 v-model="value7" :options="options" placeholder="Please select" multiple style="width: 240px" collapse-tags filterable></el-select-v2> &nbsp;
	<el-select-v2 v-model="value7" :options="options" placeholder="Please select" multiple style="width: 240px" collapse-tags filterable disabled></el-select-v2> &nbsp;
	
	<el-divider content-position="left">给选项进行分组</el-divider><!-- =============================================================== -->
	<p class="desc">只要数据格式满足特定要求，我们就可以按照自己的意愿为选项进行分组。</p>
	<el-select-v2 v-model="value8" :options="options2" placeholder="Please select" multiple style="width: 240px" :height="height" collapse-tags collapse-tags-tooltip filterable></el-select-v2>
	
	<el-divider content-position="left">自定义选项的渲染模板</el-divider><!-- =============================================================== -->
	<p class="desc">我们也可以通过自定义模板来渲染自己想要的选项内容。</p>
	<el-select-v2 v-model="value9" :options="options" placeholder="Please select" multiple style="width: 240px" :height="height" collapse-tags collapse-tags-tooltip filterable>
		<template #default="{ item }">
			<span style="margin-right: 8px">{{ item.label }}</span>
			<span style="color: var(--el-text-color-secondary); font-size: 13px">{{ item.value }}</span>
		</template>
	</el-select-v2>
	
	<el-divider content-position="left">创建临时选项</el-divider><!-- =============================================================== -->
	<p class="desc">可以创建并选中未包含在初始选项中的条目。</p>
	<p class="desc">通过使用 allow-create 属性，用户可以通过输入框创建新项目。 为了使 allow-create 正常工作， filterable 的值必须为 true。</p>
	<span>可创建新项目：</span>
	<el-select-v2 v-model="value10" :options="options" placeholder="Please select" allow-create multiple style="width: 240px" :height="height" filterable></el-select-v2>
	<br><br><span>选择后清除关键字：</span>
	<el-select-v2 v-model="value11" :options="options" placeholder="Please select" allow-create multiple style="width: 240px" :height="height" filterable :reserve-keyword="false"></el-select-v2>
	<br><br><span>不允许多选：</span>
	<el-select-v2 v-model="value12" :options="options" placeholder="Please select" allow-create style="width: 240px" :height="height" filterable :reserve-keyword="false"></el-select-v2>
	
	<el-divider content-position="left">远程搜索</el-divider><!-- =============================================================== -->
	<p class="desc">输入关键字以从远程服务器中查找数据。</p>
	<p class="desc">为了启用远程搜索，需要将 filterable 和remote 设置为 true，同时传入一个 remote-method。 remote-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。</p>
	<el-select-v2 v-model="value13" :options="options3" placeholder="Please select" multiple style="width: 240px" filterable remote :remote-method="remoteMethod" clearable :loading="loading"></el-select-v2>
	
	<el-divider content-position="left">使用 value-key</el-divider><!-- =============================================================== -->
	<p class="desc">当 options.value 是一个对象时，您需要指定一个 key</p>
	<el-select-v2 v-model="value14" :options="options4" value-key="value.name" placeholder="Please select" style="width: 240px" filterable clearable></el-select-v2>
	
	
</div>
</body>
<script>
const Main = {
	data() {
		return {
			value1: '',
			value2: '',
			value3: '',
			value4: '',
			value5: '',
			value6: '',
			value7: '',
			value8: '',
			value9: '',
			value10: '',
			value11: '',
			value12: '',
			value13: '',
			value14: '',
			height: 360,
			loading: false,
			options: [
				{value: 'Option1', label: 'OptionA',},
				{value: 'Option2', label: 'OptionB', disabled: true,}, //有禁用的
				{value: 'Option3', label: 'OptionC',},
				{value: 'Option4', label: 'OptionD',},
				{value: 'Option5', label: 'OptionE',},
			],
			options2: [
				{
					value: 'zizhishi',
					label: '自治市',
					options: [
						{value: 'Shanghai', label: '上海',},
						{value: 'Beijing', label: '北京',},
					],
				},
				{
					value: 'qita',
					label: '其他',
					options: [
						{value: 'Chengdu', label: '成都',},
						{value: 'Shenzhen', label: '深圳',},
						{value: 'Guangzhou', label: '广州',},
						{value: 'Dalian', label: '大连',},
					],
				},
			],
			options3: [],
			options4: [
				{value: {name: 'tom', test: 'test-1'}, label: 'Tom_01',},
				{value: {name: 'jek', test: 'test-2'}, label: 'Jek_02',},
				{value: {name: 'lilei', test: 'test-3'}, label: 'Lilei_03',},
			],
		}
	},
	//实例挂载完成后被调用
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			this.options = this.createOptions;
			this.options2 = this.createOptions2;
			this.options4 = this.createOptions4;
			// console.log(this.options2);
			
		})
	},
	computed: {
		createOptions(){
			const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
			// let arr = Array.from({length: 10}).map((_, idx)=>{
			// 	return {value: `Option ${idx + 1}`, label: `${initials[idx % 10]}${idx}`};
			// })
			//上面的，可以用下面这个简写：
			let arr = Array.from({length: 1000}).map((_, idx)=>(
				{value: `Option ${idx + 1}`, label: `${initials[idx % 10]}${idx}`, disabled: idx % 10 === 0,}
			));
			return arr;
		},
		createOptions2(){
			const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
			let arr = Array.from({length: 10}).map((_, idx)=>{
				const i = idx + 1;
				return {
					value: `Group ${i}`,
					label: `Group ${i}`,
					options: Array.from({length: 10}).map((_, j)=>(
						{value: `Option ${j + 1 + 10 * i}`, label: `${initials[j % 10]}${j + 1 + 10 * i}`,}
					))
				};
			})
			return arr;
		},
		createOptions4(){
			const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
			let arr = Array.from({length: 1000}).map((_, idx)=>({
				value: {
					name: `Option ${idx + 1}`,
					test: `test ${idx * 2}`,
				}, 
				label: `${initials[idx % 10]}${idx}`,
			}))
			return arr;
		},
		
	},
	methods:{
		handleChange(item){
			console.log(item)
		},
		remoteMethod(str){
			if(str !== ''){
				this.loading = true;
				setTimeout(()=>{
					this.loading = false;
					this.options3 = this.options.filter((item)=>{
						return item.label.toLowerCase().includes(str.toLowerCase());
					})
				}, 500);
			}else{
				this.options3 = [];
			}
		}
		
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>
